<template>
	<view class="withdraw">
		<view class="item">
			<view>Balance <text class="content"> {{ableNum}}</text></view>
		</view>
		<view class="item">
			<picker class="mypicker" :value="index" :range="array" @click="changeLang()" range-key="content" @change="bindPickerChange">
				<image src="../../../../static/images/personal/btns-10.png" class="icon"></image>
				<text class="content" v-if="array[index]">{{array[index].content}}</text>
			</picker>
			<image src="../../../../static/images/personal/icon-r.png" class="right"></image>
		</view>
		<view class="item">
			<view style="display: flex;align-items: center;">
				<image src="../../../../static/images/personal/btns-11.png" class="icon"></image>
				<input type="number" class="content" v-model="amount" placeholder="enter amount" />
			</view>
		</view>
		<view class="btn" @click="handleCommit">Submit</view>
	</view>
</template>

<script>
	import fetch from '@/common/fetch.js'
	export default {
		data() {
			return {
				ableNum: '',
				index: 0,
				array: [],
				amount: ''
			}
		},
		mounted() {
			this.getConfig()
		},
		methods: {
			getConfig() {
				fetch.request('/index/Yulibao/configlist', '', 'GET').then(res => {
					let {
						data
					} = res
					this.ableNum = data.usableSum
					let list = data.data
					list.map(item => {
						item.content = `Total:${item.day} day/ ${item.profit_percent}% per day`
						return item
					})
					this.array = list
				})
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			handleCommit() {
				let postdata = {
					id: this.array[this.index].id,
					amount: this.amount
				}
				fetch.request('/index/Yulibao/sendin', postdata, 'POST').then(res => {
					uni.showToast({
						title: res.msg,
						duration: 4000,
						icon: 'none'
					});
					if (res.code === 0) {
						uni.redirectTo({
							url: '/pages/personal/subpage/interest/index'
						})
					}

				})
			},
			changeLang() {
				document.getElementsByClassName('uni-picker-action-confirm')[0].innerHTML = this.$t('lixibao.confirm');
				document.getElementsByClassName('uni-picker-action-cancel')[0].innerHTML = this.$t('lixibao.cancel');
			}
		}
	}
</script>

<style lang="less" scoped>
	page,
	.withdraw {
		width: 100%;
		min-height: 100%;
		background-color: #fff;
	}

	.item {
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: solid 1rpx #F4F4F4;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&:nth-child(3) {
			border-bottom: none;
		}

		.content {
			margin-left: 40rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}

		.right {
			width: 20rpx;
			height: 24rpx;
		}

		.mypicker {
			width: 100%;
		}
	}

	.btn {
		color: #fff;
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 80rpx;
		height: 80rpx;
		background: #F53D46;
	}
</style>
